<template>
    <div id="loop-pie" ref="canvas" class="canvas-pie" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, computed, onMounted } from 'vue'
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  type TooltipComponentOption,
  LegendComponent,
  type LegendComponentOption
} from 'echarts/components';
import { PieChart, type PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
const emit = defineEmits(['graphicClick'])

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);

type EChartsOption = echarts.ComposeOption<
  TooltipComponentOption | LegendComponentOption | PieSeriesOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight})
onMounted(() => {
    var chartDom = document.getElementById('loop-pie');
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        tooltip: {
            trigger: 'item',
            backgroundColor: '#2758c3',
            borderColor: '#2758c3', 
            textStyle: {
                color: '#ffffff',
                fontSize: 12
            }
        },
        legend: {
            show: false,
            top: '5%',
            right: '2%',
            orient: 'vertical',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {color: '#fff'},
        },
        grid: {
            top: '20',
            left: 0,
            right: '30%',
            bottom: 0,
            containLabel: true
        },
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                radius: [20, 60],
                avoidLabelOverlap: false,
                height: '100%',
                left: 'center',
                width: 260,
                itemStyle: {
                    borderRadius: 4,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    alignTo: 'edge',
                    formatter: '{name|{b}}\n{time|{c}}',
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    fontSize: 12,
                    rich: {
                        name: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        time: {
                            fontSize: 10,
                            color: '#fff'
                        }
                    }
                },
                labelLine: {
                    length: 15,
                    length2: 40,
                    maxSurfaceAngle: 80
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                    let points = params.labelLinePoints || [];
                    points[2][0] = isLeft
                    ? params.labelRect.x
                    : params.labelRect.x + params.labelRect.width;
                    return {
                    labelLinePoints: points
                    };
                },
                data: props.data.seriesDataList
            }
        ]
    };

    option && myChart.setOption(option);
    myChart.on('click', function(params) {
        // 图表点击事件
        emit('graphicClick', params)
    });

})
</script>

<style scope>
.canvas-pie {
    width: 100%;
    min-height: 200px;
}
.blue {
    color: #0000ff;
}
</style>
